<template>
  <div>
    <template>
      <div>
        <el-card style="margin-bottom: 20px;">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="快递员账号:" style="width: 400px">
              <el-input
                  v-model="form.account"
                  placeholder="快递账号"
              ></el-input>
            </el-form-item>
            <el-form-item label="快递员姓名:" style="width: 400px">
              <el-input v-model="form.name" placeholder="快递员姓名"></el-input>
            </el-form-item>
            <el-form-item label="快递员手机号:" style="width: 400px">
              <el-input
                  v-model="form.phone"
                  placeholder="快递员手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属机构:" style="width: 400px">
              <el-cascader
                  v-model="form.agentId"
                  :options="options"
                  :props="props"
                  @change="handleChange"
                  :filterable="true"
                  placeholder="所属机构"
                  emitPath="false"
              ></el-cascader>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button type="danger" @click="white">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-table
            :data="tableData"
            style="width: 100%; font-size: 12px"
            align="center"
        >
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="account" label="快递员账号"> </el-table-column>
          <el-table-column prop="name" label="快递员姓名"> </el-table-column>
          <el-table-column prop="mobile" label="快递员手机号">
          </el-table-column>
          <el-table-column prop="agency.name" label="所属机构">
          </el-table-column>
          <!--          <el-table-column-->
          <!--              prop="workStatus"-->
          <!--              label="工作状态"-->
          <!--              :formatter="formatter"-->
          <!--          >-->
          <!--          </el-table-column>-->
          <el-table-column label="操作">
            <template #default="{}">
              <el-link type="primary">作业范围分配</el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
import {getoperListApi, sousuoApi} from "@/api/operationalrange";

export default {  
  name: "operational-range",
  data() {
    return {
      form: {
        account: "",
        name: "",
        phone: "",
        agentId: "",
      },
      options: [],
      props: {
        expandTrigger: "hover",
        label: "name",
        value: "id",
        checkStrictly: true,
      },
      tableData: [],
      page: {
        page: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  created() {
    this.getoperList()
  },
  methods: {
    //获取快递员列表
    async getoperList() {
      const res =await getoperListApi({...this.page,...this.form})
      // console.log(res)
      this.tableData=res.data.items
      this.total=+res.data.counts
    },
    async handleChange(e) {


    },
    async search() {
      const res= await sousuoApi({...this.page,...this.form})
      // console.log(res)
      this.tableData=res.data.items || []
    },
    white() {
      this.form={}
      this.getoperList()
    },
    formatter() {

    },
    async handleSizeChange(e) {
      this.page.pageSize=e
      const res =await getoperListApi({...this.page,...this.form})
      this.tableData=res.data.items
    },
    async handleCurrentChange(e) {
      this.page.page=e
      const res =await getoperListApi({...this.page,...this.form})
      this.tableData=res.data.items
    }
  },
};
</script>

<style></style>
